<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>生命周期</title>
</head>
<body>
<div id="app">
    <div>{{msg}}</div>
    <button @click="update">更新</button>
    <button @click="destory">销毁</button>
</div>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            msg: "生命周期"
        },
        methods: {
            update: function () {
                this.msg = "hello";
            },
            destory: function () {
                this.$destroy();
            }
        },
        beforeCreate: function () {
            console.log("beforeCreate");
        },
        created: function () {
            console.log("created");
        },
        beforeMount: function () {
            console.log("beforeMount");
        },
        mounted: function () {
            console.log("mounted");
        },
        beforeUpdate: function () {
            console.log("beforeUpdate");
        },
        updated: function () {
            console.log("updated");
        },
        beforeDestroy: function () {
            console.log("beforeDestory")
        },
        destroyed: function () {
            console.log("destoryed")
        }
    })
</script>
</body>
</html>
